<template>
  <div class="">
    <el-row class="mb20">
      <el-col :md="20">
        <el-form :inline="true" class="demo-form-inline">
          <el-button type="primary" @click="dialogVisible = true">
            查询
          </el-button>
          <el-button type="primary">
            <i class="el-icon-refresh"></i>
          </el-button>
        </el-form>
        <el-dialog title="套餐模板查询" :visible.sync="dialogVisible" width="40%">
          <el-form :model="ruleForm" label-width="150px" class="demo-ruleForm">
              <el-form-item label="产品名称：">
                  <el-input v-model="ruleForm.name" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="运营商：">
                  <el-select v-model="ruleForm.yunying" filterable placeholder="请选择" class="w100">
                      <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="运营商类别：">
                  <el-select v-model="ruleForm.category" filterable placeholder="请选择" class="w100">
                      <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="用户业务类型：">
                  <el-select v-model="ruleForm.user" filterable placeholder="请选择" class="w100">
                      <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="服务类型：">
                  <el-select v-model="ruleForm.fuwu" filterable placeholder="请选择" class="w100">
                      <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                  </el-select>
              </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">查询</el-button>
          </span>
        </el-dialog>
      </el-col>
      <el-col :md="4" class="float-right">
        <router-link :to="tempalteNew">
          <el-button type="primary">新增</el-button>
        </router-link>
      </el-col>
    </el-row>
    <el-table :data="tableData" stripe border style="width: 100%">
      <el-table-column prop="product_name" label="产品名称" width="160">
      </el-table-column>
      <el-table-column prop="category" label="运营商类别" width="120">
      </el-table-column>
      <el-table-column prop="yewu" label="用户业务模式" width="210">
      </el-table-column>
      <el-table-column prop="taocan" label="套餐类型" width="100">
      </el-table-column>
      <el-table-column prop="taocandan" label="套餐单位" width="100">
      </el-table-column>
      <el-table-column prop="taocanzhou" label="套餐周期" width="80">
      </el-table-column>
      <el-table-column prop="taocanliu" label="套餐流量" width="110">
      </el-table-column>
      <el-table-column prop="taocanprice" label="套餐价格" width="90">
      </el-table-column>
      <el-table-column prop="methods" label="操作" width="197">
        <template slot-scope="scope">
            <router-link size="mini" tag="button" :to="tempalteEdit" class="el-button el-button--default el-button--mini">编辑</router-link>
            <el-button
              size="mini"
              type="danger" @click="deleteSingData(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tempalteNew: '/agent_profit/agent_product_template/new',
        tempalteEdit: '/agent_profit/agent_product_template/edit',
        visible2: false,
        dialogVisible: false,
        options1: [{
          value: '选项1',
          label: '无锡移动'
        }, {
          value: '选项2',
          label: '阿里云'
        }],
        options2: [{
          value: '选项1',
          label: '联通'
        }, {
          value: '选项2',
          label: '移动'
        }],
        options3: [{
          value: '选项1',
          label: '电信月租大王卡（分销商）'
        }, {
          value: '选项2',
          label: '沉默期'
        }],
        options4: [{
          value: '选项1',
          label: '日套餐'
        }, {
          value: '选项2',
          label: '月套餐'
        }],
        ruleForm: {
            name: '',
            yunying: '',
            category: '',
            user: '',
            fuwu: ''
        },
        tableData: [
            {
                product_name: '20G电信',
                category: '联通',
                yewu: '月叠加包（分销商-分销商）',
                taocan: '日套餐',
                taocandan: '天',
                taocanzhou: 1,
                taocanliu: '111.0MB',
                taocanprice: '22.0'
            }
        ],
        tableData1: [],
        newTableData: [],
        value8: ''
      }
    },
    mounted() {
    //   this.getCarrierData()
      if (this.$route.fullPath == '/agent_profit/agent_product_template/new') {
        this.tempalteNew = '/agent_profit/agent_product_template/new'
      } else {
        this.tempalteNew = '/agent_increase/agent_product_template/new'
      }
       
      if (this.$route.fullPath == '/agent_profit/agent_product_template/edit') {
        this.tempalteEdit = '/agent_profit/agent_product_template/edit'
      } else {
        this.tempalteEdit = '/agent_increase/agent_product_template/edit'
      }
    },
    methods: {
    //   onSubmit() {
    //     if (this.formInline.user) {
    //       this.tableData = this.tableData1
    //       this.newTableData = this.tableData.filter((res) => {
    //         console.log(res['carrier'] == this.formInline.user)
    //         return res['carrier'].includes(this.formInline.user)
    //       })
    //     } else {
    //       this.newTableData = this.tableData1
    //     }
    //     this.tableData = this.newTableData
    //   },
    //   deleteSingData(goods) {
    //     this.tableData= this.tableData1 = this.tableData.filter((res) => {
    //       return res.carrierId != goods.carrierId
    //     })
    //   },
    //   getDetail(goods) {
    //     this.$router.push({
    //       path: `/carrier/${goods.carrierId}`
    //     })
    //     this.$store.commit('setCarrier', goods)
    //     console.log(this.$store.commit('setCarrier', goods))
    //   },
    //   select(index, row) {
    //     console.log(index, row)
    //   },
    //   getCarrierData() {
    //     this.$axios.get('/api/carrier').then((res) => {
    //       if (res.data.errno === 0) {
    //         this.tableData = this.tableData1 = res.data.data.carrierData
    //       }
    //     })
    //     this.formInline.user = ''
    //   }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .mt_2 {
    margin-top: -2px;
  }
  
  .tr {
    text-align: right;
  }
  
  .lh33 {
    line-height: 33px;
  }
  
  .mb20 {
    margin-bottom: 20px;
  }

  .w100 {
    width: 100%;
  }
</style>
